<template>
  <div>
    <el-form-item :label="prop.name" :prop="formItemProp ? formItemProp : prop.id" :rules="rules" v-show="showComponent">
      <template slot="label">
        <rva-form-config :prop="prop"></rva-form-config>
      </template>
      <el-select
          style="width: 100%"
          :value="value"
          :multiple="this.prop.formSelectorSingle == 'N'"
          filterable
          remote
          :disabled="disabled"
          reserve-keyword
          :placeholder="'请输入' + prop.name"
          :remote-method="searchSelectOptions"
          @change="$emit('input', $event)"
          :loading="loading">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import request from '@/utils/request'
import {RvaUtils} from '@/api/rva/util'
import formInput from "@/api/rva/form-input";

export default {
  mixins: [formInput],
  data() {
    return {
      options: [],
      loading: false,
    }
  },
  methods: {
    afterCreated() {
      if (RvaUtils.isEmpty(this.value)) {
        if (RvaUtils.parseValue(this.prop.data, 'selectorInitOptions', 'N') == 'Y') {
          this.searchSelectOptions('#$@$#');
        }
        return;
      }
      // 显示遮罩层
      this.loading = true;
      var me = this;
      this.initOptions(this.getUrl('formInputorData', 'getByIds'), {
        ids: this.prop.formSelectorSingle == 'N' ? this.value.join(",") : this.value
      }, function () {
        if (RvaUtils.parseValue(me.prop.data, 'selectorInitOptions', 'N') == 'Y') {
          me.searchSelectOptions('#$@$#');
        }
      });
    },
    initOptions(url, params, fn) {
      if (!url) {
        this.msgError('参数配置错误，请检查：formRelatedCrud/formInputorData/formInputorData');
        return;
      }
      this.options = [];
      RvaUtils.clone(this.requestParams, params, true);
      RvaUtils.clone(this.formData, params, true);
      params.appIds = this.getAppIds();
      if (this.prop.data && JSON.parse(this.prop.data).selectorPageSize) {
        params.pageSize = JSON.parse(this.prop.data).selectorPageSize;
      } else {
        params.pageSize = 20;
      }
      request({
        url,
        method: 'post',
        data: params
      }).then(response => {
        var selectorOptionLabel = RvaUtils.parseValue(this.prop.data, 'selectorOptionLabel');
        for (var i in response.rows) {
          let row = response.rows[i];
          row.value = row.selectorValue;
          row.label = row.selectorLabel;
          if (selectorOptionLabel) {
            row.label = eval(selectorOptionLabel);
          }
        }
        this.options = response.rows;
        if (fn) {
          fn ();
        }
        // 隐藏遮罩层
        this.loading = false;
      }).catch(err => {
        console.log (url, err);
        // 隐藏遮罩层
        this.loading = false;
      });
    },
    searchSelectOptions(query) {
      if (query === '') {
        return;
      }
      // 显示遮罩层
      this.loading = true;
      if (query == '#$@$#') {
        query = '';
      }
      this.initOptions(this.getUrl('formInputorSearch', 'search'), {
        searchContent: query
      });
    },
    getAppIds () {
      if (RvaUtils.isNotEmpty(this.prop.formRelatedCrud)) {
        return this.prop.formRelatedCrud.split(',');
      }
    },
    getUrl (key, suffix) {
      var url = this.prop[key];
      if (url) {
        return url;
      }
      var appIds = this.getAppIds();
      if (appIds) {
        return ['/rva/crud/', appIds[0], '/',suffix].join('');
      }
    }
  }
}
</script>
